<template>
    <view class="wraps" :data-theme="globPrimary">
        <u-navbar
            :custom-back="custback"
            :border-bottom="false"
            :immersive="false"
            :background="{ background: globPrimaryColor }"
            back-icon-color="#ffffff"
            title-color="#ffffff"
            z-index="999"
        >
            <view class="center_na">
                <view class="jilu" @click="show = !show">{{ title }}</view>
                <u-icon
                    name="xiala-"
                    v-if="!show"
                    custom-prefix="edu-icon"
                    size="30"
                    color="#fff"
                ></u-icon>
                <u-icon
                    name="shangla"
                    v-else
                    custom-prefix="edu-icon"
                    size="30"
                    color="#fff"
                ></u-icon>
            </view>
            <view slot="right" class="navbar-right"></view>
        </u-navbar>

        <view class="">
            <u-dropdown
                ref="dropdowm"
                :active-color="globPrimaryColor"
                :close-on-click-mask="false"
            >
                <u-dropdown-item
                    ref="dropitem"
                    v-model="value1"
                    :options="options1"
                    @change="changeItem"
                ></u-dropdown-item>
            </u-dropdown>
        </view>

        <view class="course-scroll" v-if="showCompont == 'false'">
            <course-income></course-income>
        </view>
        <view class="course-scroll" v-else-if="showCompont == 'true'">
            <user-income></user-income>
        </view>

        <!-- 头部弹窗 -->
        <u-popup mode="top" v-model="show" z-index="990">
            <view
                :style="{
                    width: '100%',
                    height: globNavbarHeight + globStatusBarHeight + 'px',
                }"
            ></view>
            <view class="popup_item">
                <view class="popup_content">
                    <view
                        class="list_popup"
                        :class="list_id == index ? 'txt_color' : ''"
                        v-for="(i, index) in list"
                        :key="index"
                        @click="chose_click(index, i)"
                    >
                        <view v-if="list_id == index" :style="{ color: globPrimaryColor }">{{
                            i
                        }}</view>
                        <view v-else>{{ i }}</view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import courseIncome from './components/cour-income.vue'
import userIncome from './components/user-income.vue'
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        courseImage,
        courseIncome,
        userIncome,
    },
    data() {
        return {
            arrow: false,
            value1: 1,
            options1: [
                {
                    label: '推广收入',
                    value: 0,
                },
                {
                    label: '推广课程',
                    value: 1,
                },
                {
                    label: '推广用户',
                    value: 2,
                },
            ],

            show: false,
            title: '推广课程',
            list: ['推广收入', '推广课程', '推广用户'],
            list_id: 1,

            courseList: [],
            courseListUser: [],
            showCompont: 'false',
        }
    },
    onLoad(option) {
        this.showCompont = option.type
        if (option.type == 'false') {
            this.title = '推广课程'
        } else {
            this.title = '推广用户'
            this.value1 = 2
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
            globNavbarHeight: 'projectSetting/globNavbarHeight',
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
    },
    methods: {
        custback() {
            this.$u.route({
                url: '/pages/user/index',
                type: 'switchTab',
            })
        },
        opendrop() {
            if (this.$refs.dropdowm.active == false) {
                this.$refs.dropdowm.open()
                this.$refs.dropitem.active = true
                this.arrow = true
            } else {
                this.$refs.dropdowm.close()
                this.$refs.dropitem.active = false
                this.arrow = false
            }
        },
        changeItem(value) {
            this.value1 = value
            this.title = this.options1[value].label
            if (value == 0) {
                this.$u.route('/pageUser/user/income')
            } else if (value == 1) {
                this.showCompont = 'false'
            } else {
                this.showCompont = 'true'
            }
        },
        chose_click(_index, name) {
            this.list_id = _index
            this.title = name
            if (_index == 0) {
                uni.redirectTo({
                    url: '/pageUser/user/income',
                })
            } else if (_index == 1) {
                this.showCompont = 'false'
                this.show = false
            } else {
                this.showCompont = 'true'
                this.show = false
            }
        },
        //返回
        returnClick() {
            console.log('ok')
            this.$u.route({
                type: 'back',
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f7f7f7;
}
/deep/.u-dropdown__menu {
    display: none !important;
}
/* #ifdef MP-WEIXIN */
/deep/.u-dropdown__content {
    // top: 160rpx!important;
    top: 0rpx !important;
    height: calc(100vh - 160rpx) !important;
}
/* #endif */

/* #ifndef MP-WEIXIN */
/deep/.u-dropdown__content {
    top: 0 !important;
    height: calc(100vh - 44px) !important;
}
/* #endif */

.center_na {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .jilu {
        font-size: 36rpx;
        color: #303133;
        font-weight: bold;
        margin-right: 10rpx;
        color: #ffffff;
    }
}

.navbar-right {
    width: 60rpx;
    color: #ffffff;
    font-size: 30rpx;
    margin-right: 30rpx;
}

.popup_item {
    height: auto;
    width: 100%;

    .popup_head {
        padding: 20rpx 30rpx;
        display: flex;
        justify-content: space-between;

        @include bg-color();
        .popop_cen {
            color: #303133;
            display: flex;
            align-items: center;

            .font {
                font-size: 36rpx;
                font-weight: bold;
                margin-right: 12rpx;
                color: #ffffff;
            }
        }

        .popop_r {
            color: #ffffff;
            font-size: 30rpx;
            width: 60rpx;
        }
    }

    .popup_content {
        padding-left: 30rpx;
        padding-right: 30rpx;

        .list_popup {
            height: 89rpx;
            line-height: 87rpx;
            font-size: 28rpx;
        }
    }
}

.popup_content .list_popup:not(:last-child) {
    border-bottom: 1px solid #f7f7f7;
}

.txt_color {
    @include text-color();
}

.user_content .user_item:not(:last-child) {
    border-bottom: 1px solid #f7f7f7;
}
</style>
